<template>
	<view>
		<view class="tabs">
			<view class="tabs_item" @click="handleItem(index)" v-for="(item,index) in tabs" :key="item.id" :class="item.isActive?'isActive':''">
				{{item.value}}
			</view>
		</view>
		<view class="content">
			<view class="tabs1" v-if="tabs[0].isActive">
				<view class="tabs_item">
					<view class="item_name">
						任务奖励+1
					</view>
					<view class="item_time">
						2021-11-12 21:12:34
					</view>
				</view>
				<view class="tabs_item">
					<view class="item_name">
						任务奖励+1
					</view>
					<view class="item_time">
						2021-11-12 21:12:34
					</view>
				</view>
				<view class="message">
					已无更多数据
				</view>
			</view>
			<view class="tabs1" v-if="tabs[1].isActive">
				<view class="message">
					已无更多数据
				</view>
			</view>
			<view class="tabs1" v-if="tabs[2].isActive">
				<view class="tabs_item">
					<view class="item_name">
						任务奖励+1
					</view>
					<view class="item_time">
						2021-11-12 21:12:34
					</view>
				</view>
				<view class="message">
					已无更多数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs:[
					{
						id:0,
						value:'快手',
						isActive:true
					},
					{
						id:1,
						value:'抖音',
						isActive:false
					},
					{
						id:2,
						value:'小红书',
						isActive:false
					}
				],
			};
		},
		methods:{
			handleItem(index){
				this.tabs.forEach(item=>{
					return item.id==index?item.isActive=true:item.isActive=false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabs{
	display: flex;
	.tabs_item{
		width: 33.33%;
		line-height: 70rpx;
		text-align: center;
	}
	.isActive{
		border-bottom: 2px solid #4CD964;
		color:#4CD964;
	}
}
.content{
	font-size: 30rpx;
	.tabs_item{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		width: 100%;
		line-height: 80rpx;
		.item_name{
			flex: 1;
			padding-left: 20rpx;
		}
		.item_time{
			flex: 1;
			text-align: right;
			padding-right: 20rpx;
			}
	}
	.message{
		text-align: center;
		line-height: 40rpx;
		margin-top: 20rpx;
	}
}
</style>
